<!--
 * @Description:邀请记录
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-9 10:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:01
-->
<template>
	<view class="invitation-record-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('Invitation.Invitation')"  ></c-navigation-bar>
			<view class="container-box">
				<!-- 顶部信息收益和人数 -->
				<view class="earnings">
					<view class="people-number">
						<h2>{{info.yaoqingrenshu}}</h2>
						<p>{{$t('Invitation.SuccessfullyInvited')}}</p>
						<p>(person)</p>
					</view>
					<view class="earn-rewards">
						<h2>${{info.hsouyizhi}}</h2>
						<p>
							{{$t('Invitation.EarnRewards')}}<br>
							<u-link>Withdrawal>
							</u-link>
						</p>
					</view>
				</view>
				<view class="user-list">
					<u-subsection active-color="#1E2432" inactive-color="#ACB1C0" :bold="false" :list="list"
						:current="current" @change="subSectionChange">
					</u-subsection>
					<view class="user-list-box">
						<view style="margin-bottom: 62rpx;" v-for="(item, id) in invitationRecord.customer.list" :key="id">
							<listItem :src="item.avatar" :name="item.userName" :time="item.inviteTime"
								:money="item.money">
							</listItem>
						</view>
					</view>
				</view>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 
				invitationRecord: [{},
					{},
					{},
				],
				// 信息
				info: {
					yaoqingrenshu: 1009,
					hsouyizhi: 1389,
				},
				invitationRecord: {
					customer: {
						list: [],
						data: {
							"pageSize": 20,
							"pageNum": 1,
							"startTime": "2023-01-01 00:00:00",
							"endTime": "2050-12-30 00:00:00",
							"id": "123",
							"name": "123"
						}
					}
				},
				list: [{
						name: this.$t('Invitation.Customer')
					},
					{
						name: this.$t('Invitation.Shopkeeper')
					},
					{
						name: this.$t('Invitation.Anchor')
					}
				],
				userList: [{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '1'
					},
					{
						avatar: '',
						name: 'Stanley Campbel',
						tiem: '2013/12/31 12:12:35',
						money: '2'
					},
					{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '3'
					}, {
						avatar: '',
						name: 'Stanley Campbel',
						tiem: '2013/12/31 12:12:35',
						money: '2'
					},
					{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '3'
					}, {
						avatar: '',
						name: 'Stanley Campbel',
						tiem: '2013/12/31 12:12:35',
						money: '2'
					},
					{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '3'
					}, {
						avatar: '',
						name: 'Stanley Campbel',
						tiem: '2013/12/31 12:12:35',
						money: '2'
					},
					{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '3'
					}, {
						avatar: '',
						name: 'Stanley Campbel',
						tiem: '2013/12/31 12:12:35',
						money: '2'
					},
					{
						avatar: '',
						name: 'Eliza Garz',
						tiem: '2013/12/31 12:12:35',
						money: '3'
					},
				],
				current: 0
			};
		},
		onLoad() {
			this.getInvitationRecordAjax()
		},
		methods: {
			// 条件改变
			subSectionChange(val) {
				this.current = val
				this.getInvitationRecordAjax()
			},
			// 获取邀请记录
			getInvitationRecordAjax() {
				this.$u.post('/app/user/invite/history', this.invitationRecord.customer.data).then(res => {
					this.invitationRecord.customer.list = res.data.records
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.invitation-record-container {
		height: 100vh;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		.container-box {
			height: 100%;
			display: flex;
			flex-direction: column;

			.earnings {
				display: flex;
				justify-content: space-around;
				padding-bottom: 40rpx;
				position: relative;

				&::before {
					content: '';
					width: 100vw;
					background-color: #F7F8FA;
					position: absolute;
					bottom: 0;
					height: 6rpx;
				}

				>view {
					h2 {
						font-weight: bold;
						font-size: 44rpx;
						color: #0A1F44;
					}

					p {
						line-height: 40rpx;
						color: #999CAD;
					}
				}
			}

			.user-list {
				flex: auto;
				margin-top: 56rpx;
				padding: 0 10rpx;
				display: flex;
				flex-direction: column;
				height: 0;

				/deep/  .u-subsection {
					height: 60rpx !important;
					padding: 2rpx !important;

					.u-item-bg {
						height: 50rpx !important;
						width: 216rpx !important;
					}
				}

				.user-list-box {
					flex: auto;
					overflow-y: auto;
					height: 0;
					padding-top: 30rpx;
				}
			}
		}
	}
</style>
